<template>
    <div>
        <!-- 顶部搜索区域 -->
        <topnav></topnav>

        <!-- TAB切换区域 -->
        <tab :tabArr="tabArr" ref="child" @click="parTabFun"></tab>

        <!-- TAB切换内容区域 -->
        <div class="listContent" :style="'height:' + sysH  + 'px;'">
            <ul 
                :style="'width:' + tabArr.length * sysW + 'px;transform: translate3d(' +  contentX + 'px, 0, 0);'"
            >
                <li :style="'width:' + sysW + 'px;'">0</li>
                <li :style="'width:' + sysW + 'px;'">1</li>
            </ul> 
        </div>    
    </div>
</template>

<script>
import topnav from '../../components/publicModule/header'
import tab from '../../components/publicModule/tab'

export default {
    data () {
        return {
            tabArr: ['电影','电视'],//TAB列表
            eq: 0,//TAB选中的下标位置
            tabX: 10,//TAB的X轴位置
            contentX: 0,//内容区域的X轴位置
            sysW: document.documentElement.clientWidth,//可视区域的宽度
            sysH: document.documentElement.clientHeight - 150,//可视区域的高度
        }
    },
    methods: {

         //TAB切换
        parTabFun () {
            this.$refs.child.tabFun()
        },

        //TAB切换
        tabFun (index) {
            this.eq = index
            if (index == 0) { 
                this.tabX  = 0
                this.contentX = 0
            } else {     
                this.tabX = this.sysW / 2
                this.contentX = -this.sysW
            }
        }
    },
    components: {
        topnav,
        tab
    }
}
</script>

<style scoped lang="scss">
@import url('../../assets/css/base.scss');
</style>
